<!DOCTYPE html>
<meta charset="utf-8">
<html>

<head>
    <link type="text/css" rel="stylesheet" href="./options.css">
</head>

<body>
    <div style="margin-left:15%;">
        <label for="content-settings" class="setting-title i18n" data-i18n-name="ContentSettings"></label>
        <div id="content-settings">
            <div class="row">
                <label for="rm" class="checked-label i18n" data-i18n-name="PhoneticSymbol">
                    <input type="checkbox" value="rm" class="checkbox dt-option" id="rm" />
                </label>
                <label for="at" class="checked-label i18n" data-i18n-name="CommonMeanings">
                    <input type="checkbox" value="at" class="checkbox dt-option" id="at" />
                </label>
            </div>
            <div class="row">
                <label for="bd" class="checked-label i18n" data-i18n-name="DetailedMeanings">
                    <input type="checkbox" value="bd" class="checkbox dt-option" id="bd" />
                </label>
                <label for="md" class="checked-label i18n" data-i18n-name="Definitions">
                    <input type="checkbox" value="md" class="checkbox dt-option" id="md" />
                </label>
            </div>
            <div class="row">
                <label for="ss" class="checked-label i18n" data-i18n-name="Synonyms">
                    <input type="checkbox" value="ss" class="checkbox dt-option" id="ss" />
                </label>
                <label for="rw" class="checked-label i18n" data-i18n-name="Phrases">
                    <input type="checkbox" value="rw" class="checkbox dt-option" id="rw" />
                </label>
            </div>
            <div class="row">
                <label for="ex" class="checked-label i18n" data-i18n-name="Examples">
                    <input type="checkbox" value="ex" class="checkbox dt-option" id="ex" />
                </label>
            </div>
        </div>

        <label for="layout-settings" class="setting-title i18n" data-i18n-name="LayoutSettings"></label>
        <div id="layout-settings">
            <div class="row">
                <label for="popup-from-right" class="checked-label i18n" data-i18n-name="PopupFromRight">
                    <input type="radio" value="right" class="radio layout-option" name="PopupPosition" id="popup-from-right">
                </label>
                <label for="popup-from-left" class="checked-label i18n" data-i18n-name="PopupFromLeft">
                    <input type="radio" value="left" class="radio layout-option" name="PopupPosition" id="popup-from-left">
                </label>
            </div>
            <div class="row">
                <label for="Resize" class="checked-label i18n" data-i18n-name="ResizeSetting">
                    <input type="checkbox" value="resize" class="checkbox resize-option" name="Resize" id="Resize">
                </label>
            </div>
        </div>

        <label for="other-settings" class="setting-title i18n" data-i18n-name="OtherSettings"></label>
        <div id="other-settings">
            <div class="row">
                <label for="select-translate" class="checked-label i18n" data-i18n-name="SelectTranslate">
                    <input type="checkbox" value="SelectTranslate" class="checkbox other-option" id="select-translate">
                </label>
                <label for="use-pdf-js" class="checked-label i18n" data-i18n-name="UsePDFjs">
                    <input type="checkbox" value="UsePDFjs" class="checkbox other-option" id="use-pdf-js">
                </label>
            </div>
            <div class="row">
                <label for="translate-after-dbl-click" class="checked-label i18n" data-i18n-name="TranslateAfterDblClick">
                        <input type="checkbox" value="TranslateAfterDblClick" class="checkbox other-option" id="translate-after-dbl-click">
                </label>
                <label for="translate-after-select" class="checked-label i18n" data-i18n-name="TranslateAfterSelect">
                    <input type="checkbox" value="TranslateAfterSelect" class="checkbox other-option" id="translate-after-select">
                </label>
            </div>
        </div>
    </div>
</body>

<script src="./options.js"></script>

</html>